<template>
  <div class="settings-phone">
    <settings-detail-template
      @save="saveSettings" 
      @click="handleHideLayer"
      :name="name">
      <div class="form-wrapper">
        <form class="form box-shadow">
          <div @click="chooseQuestions">
            <input-item 
              class="bank-name"
              :title="'保密问题'" 
              :chooseVal="questions"
              :placeholder="'请选择保密问题'"
              :readonly="readonly"
              @input="updateQuestions"
              >
              <span class="icon-bank">
                <i class="iconfont iconacbar_tianjia"></i>
              </span>
            </input-item>
          </div>
          <input-item 
            :title="'保密答案'" 
            :placeholder="'请输入答案'"
            @input="updateAnswers"
            >
          </input-item>
        </form>
        <!-- <bc-modal v-show="showQuestions"> -->
          <slide-up-questions
            :dataList="questionList" 
            :show="showQuestions" 
            @click="updateQuestions"
            @hide="hideQuestions"
            >
          </slide-up-questions>
          <!-- <slide-up-bank ></slide-up-bank> -->
        <!-- </bc-modal> -->
      </div>
    </settings-detail-template>
    
  </div>
</template>
<script>
import SettingsDetailTemplate from './settings-detail-template'
import InputItem from '@/pages/login/components/input-item'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpQuestions from '@/components/slide-up-questions/slide-up-questions'
export default {
  components: {
    SettingsDetailTemplate,
    InputItem,
    BcModal,
    SlideUpQuestions
  },
  data() {
    return {
      name: '保密问题',
      questions: '',
      answers: '',
      errorMsg: '',
      showQuestions: false,
      questionList: [
        {
          id: 1,
          content: '我的出生地?'
        },
        {
          id: 2,
          content: '我的宠物的名字?'
        },
        {
          id: 3,
          content: '我最爱的人的名字?'
        },
        {
          id: 4,
          content: '我第一次去的最远的城市的名字?'
        },
        {
          id: 5,
          content: '我现在工作的城市名字?'
        },
        {
          id: 6,
          content: '我的第一辆车什么品牌?'
        },
        {
          id: 7,
          content: '我最喜欢吃的食物?'
        }
      ],
      readonly: true,
      saved : false
    }
  },
  methods: {
   
    updateAnswers(val) {
      this.answers = val
      // this.phoneNo = val
    },
    updateQuestions(val) {
      this.questions = val
      this.showQuestions = false
    },
    hideQuestions() {
      this.showQuestions = false 
    },
    saveSettings() {
      if (this.answers == '') {
        this.errorMsg = 'xxx'
      }
      else {
        this.saved = true
        this.$emit('pop',"保存成功")
        let data = {
          questions: this.questions,
          answers: this.answers
        }
      }
    },
    handleHideLayer() {
      if(this.saved != false){
        this.$emit('click')
      }
      else{
        this.$emit('pop',"未修改")
        this.$emit('click')
      }
    },
    chooseQuestions() {
      this.showQuestions = true
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .settings-phone 
    .form-wrapper 
      box-sizing border-box 
      padding 10px
    .form 
      border-radius 3px
      background #fff
      border 1px solid $color-divide-line
      .bank-name >>> .icon 
        display none
      .icon-bank 
        width 16px 
        height 16px 
        border-radius 50% 
        background-color #cccdd0 
        display flex 
        align-items center 
        justify-content center
        .iconfont 
          color #fff 
          font-size 12px
    .get-code 
      margin-left 10px 
      color $color-theme-dark
</style>